<!DOCTYPE html>
<html class="x-admin-sm">
    
    <head>
        {include file="public/header"}
    <body>
        <div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <label for="username" class="layui-form-label">
                            <span class="x-red">*</span>用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" required="" lay-verify="required" autocomplete="off" class="layui-input" maxlength="20"></div>
                    </div>
                    <div class="layui-form-item">
                        <label for="username" class="layui-form-label">
                            <span class="x-red">*</span>手机号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="phone" required="" lay-verify="required|phone" autocomplete="off" class="layui-input" maxlength="11"></div>
                    </div>
                    <div class="layui-form-item">
                        <label for="phone" class="layui-form-label">
                            <span class="x-red">*</span>密码</label>
                        <div class="layui-input-inline">
                            <input type="text" name="password" autocomplete="off" value="123456" class="layui-input" >
                        </div>
						          <div class="layui-form-mid layui-word-aux">
                          <span class="x-red">*</span>初始密码123456
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">
                      <span class="x-red">*</span>头像</label>
                      <div class="layui-input-block">
                        <img src="/static/images/tourist.png" class="upload_img">
                        <input type="hidden" name="avatar" value="/static/images/tourist.png" class="img_val">
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">
                      <span class="x-red">*</span>选择角色</label>
                      <div class="layui-input-block" style="width: 250px">
                          <select name="role">
                            {volist name="data.role" id="v"}
                            <option value="{$v.id}">{$v.name}</option>
                            {/volist}
                          </select>
                      </div>
                    </div> 
                    <div class="layui-form-item">
                        <label for="L_repass" class="layui-form-label"></label>
                        <button type="button"  class="layui-btn" lay-filter="submit" lay-submit="">增加</button>
                    </div>
                </form>
        </div>
        </div>
    </body>
    <script>
    //Demo
    layui.use(['form','layer','upload'], function(){
      var form = layui.form,layer = layui.layer,upload = layui.upload;
      
      //公共上传文件方法
      var uploadInst = upload.render({
          elem: '.upload_img' //绑定元素
          ,url: "{:url('base/uploadImage')}" //上传接口
          ,field:'file'
          ,accept : 'images'
          ,exts : 'jpg|png|gif|jpeg'
          ,size :40960 //最大4M
          ,multiple :false //不允许多图上传
          ,before: function(obj){

                    layer.load(); //上传loading
                }
          ,done: function(res){
            //上传完毕回调
            $('.img_val').val(''+res.data.src+''); //隐藏域新上传图片的路径
            $('.upload_img').attr('src',res.data.src);
            layer.closeAll("loading");
            layer.msg(res.msg);
          }
          ,error: function(){
            layer.msg('上传失败');
          }
      });
      //监听提交
        form.on('submit(submit)', function(data){
            $.ajax({
                  url: "{:url('user/addUser')}",
                  data: data.field,
                  type: 'post',
                  dataType: "json",
                  async: false,
                  success: function (response) {
                      if (response.code == '200') {
                          layer.msg(response.msg);  
                          setTimeout(function () {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭 
                            parent.location.reload(); //父级页面
                          }, 1500)
                      } else {
                          layer.msg(response.msg);
                          return false;
                      }
                  }
            })
        return false;
      });
    });
    </script>
</html>